<template>
    <div class="noData">
        <el-card shadow="never" class="header_box">
            <div class="header_img">
                <img
                    class="custom_avator"
                    src="https://static.scrm.keyid.cn/assets/images/web-pc/fissionIcon.png"
                    alt="" />
            </div>
            <div class="header_text">
                <p class="title">裂变引流</p>
                <p class="rules">
                    裂变引流是以企业微信客服号作为承接客户的载体，进行获客引流。通过奖品福利、优惠券、红包等吸引用户，让客户扫码添加企业微信客服号为好友，客户分享专属海报，再邀请若干好友添加企业微信号，完成邀请即可领取相应奖励。
                </p>
                <div>
                    <el-button class="btn" size="small" type="primary" @click="goUse">去使用</el-button>
                </div>
            </div>
        </el-card>
        <el-card shadow="never" class="content_box zw-common-scrollbar">
            <p class="sem-title">营销场景</p>
            <div class="content">
                <div>
                    <img src="https://static.scrm.keyid.cn/assets/images/web-pc/fissionMarkting.png" alt="" />
                </div>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { defineEmits } from 'vue';
import { useStore } from '@/store';
const store = useStore();

const emit = defineEmits(['submit']);
const goUse = () => {
    // const { user:{currentCorp} } = JSON.parse(localStorage.getItem('zw-scrm-state'))
    const currentCorp = store.getters['user/getCurrentCorp'];
    emit('submit', currentCorp);
};
</script>

<style lang="scss" scoped>
.noData {
    :deep(.el-card__body) {
        padding: 16px 20px;
        height: 100%;
        box-sizing: border-box;
    }
    :deep(.header_box) {
        display: flex;
        .el-card__body {
            display: flex;
            align-items: center;
        }
    }
    .header_img {
        margin-right: 16px;
        img {
            width: 100px;
            height: 100px;
        }
    }
    .header_text {
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #000000;
        font-weight: 400;
        .title {
            font-size: 20px;
            font-weight: 500;
        }
        .rules {
            color: #33302d;
            font-size: 14px;
            line-height: 20px;
        }
        .btn {
            width: 80px;
            height: 30px;
        }
        .docs {
            font-size: 14px;
            p {
                line-height: 18px;
            }
        }
    }

    :deep(.content_box) {
        flex-direction: column;
        width: 100%;
        margin-top: 16px;
        height: calc(100vh - 305px);
        padding: 8px 4px;
        position: relative;
        overflow: auto;
        .sem-title {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 16px;
            display: flex;
            align-items: center;
            &::before {
                display: inline-block;
                content: '';
                width: 3px;
                height: 16px;
                background: #ff6b00;
                border-radius: 2px;
                margin-right: 6px;
            }
        }
        .content {
            width: 100%;
            height: calc(100% - 62px);
            text-align: center;
            margin-top: 30px;
            > div {
                width: 100%;
                height: 100%;
            }
            img {
                width: 100%;
                height: 100%;
                min-height: 420px;
                object-fit: contain;
            }
        }
    }
}
</style>
